<template>
    <div class="zw-unity-kit-profession-select">
        <el-select
            v-model="value"
            :placeholder="props.placeholder"
            :filterable="props.filterable"
            :disabled="props.disabled"
            :clearable="props.clearable"
            @change="handleChange">
            <el-option
                v-for="item in options"
                :key="item.industry_code"
                :label="item.name"
                :value="item.industry_code" />
            <template #empty>
                <div class="el-select-dropdown__empty">暂无数据</div>
            </template>
        </el-select>
    </div>
</template>
<script lang="ts" setup>
import { ref, computed, getCurrentInstance, onMounted } from 'vue';
import { ElSelect } from 'element-plus';
import { getIndustryList } from '../api/ZwUnityKitProfessionSelect';

const app = getCurrentInstance();

const emit = defineEmits<{
    /**
     * v-model的绑定事件.
     */
    (e: 'update:modelValue', modelValue: string): void;
    /**
     * v-model的绑定事件.
     */
    (e: 'update:name', name: string): void;
    /**
     * 切换行业的的事件.
     */
    (e: 'change', value: any): void;
}>();

defineOptions({
    name: 'ZwUnityKitProfessionSelect',
    inheritAttrs: false
});

// props参数
interface IProps {
    /** v-model绑定的值 */
    modelValue: string;
    /** 是否禁用 */
    disabled?: boolean;
    /** 输入框占用文本 */
    placeholder?: string;
    /** 是否支持清空。 */
    clearable?: boolean;
    /** 是否支持搜索 */
    filterable?: boolean;
    /** 选中的行业名称, 为了解决行业列表未加在完的情况下进行渲染会展示code，因此需要一个对应code的行业名称。如果列表里不存在，则展示默认的行业名称 */
    name?: string;
}

const props = withDefaults(defineProps<IProps>(), {
    /** 是否禁用 */
    disabled: false,
    /** 是否支持清空。 */
    placeholder: '请选择所属行业',
    clearable: false,
    filterable: true,
    name: undefined
});

const options = ref([
    {
        industry_code: props.modelValue,
        name: props.name
    }
]);

const optionsMap = new Map();
/**
 * 级联选择中的值
 */
const value = computed({
    get: () => props.modelValue,
    set: val => {
        emit('update:modelValue', val);
    }
});

const handleChange = value => {
    emit('update:name', optionsMap.get(value)?.name);
    emit('change', value);
};

onMounted(async () => {
    const { data } = await getIndustryList(app);
    data.forEach(item => {
        optionsMap.set(item.industry_code, item);
    });
    options.value = data;
});
</script>

<style lang="scss" scoped>
@import './Index';
</style>
